<!--
 * @Author: liqi
 * @Date: 2022-10-15 21:44:13
 * @LastEditors: liqi
 * @LastEditTime: 2022-10-28 20:06:58
 * @Description: 
-->
<template>
  <!-- 个人信息页面 -->
  <div>
    <!-- 头像 -->
    <div class="top">
      <div class="img">
        <img :src="userInfo.userFace" alt="" />
      </div>
      <div class="img_btn">
        <el-button size="small" type="text" @click="updateIcon"
          >修改头像</el-button
        >
      </div>
    </div>
    <!-- 头像模态框 -->
    <el-dialog title="修改头像" :visible.sync="dialogVisible" width="50%">
      <el-form>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="userInfo.userFace" :src="userInfo.userFace" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toUpdateFace">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 头像模态框结束 -->
    <!-- 基本信息 -->
    <div class="info">
      <el-form>
        <el-form-item label="登录用户">{{ userInfo.username }}</el-form-item>
        <el-form-item label="用户姓名">{{ userInfo.realname }}</el-form-item>
        <el-form-item label="用户手机">{{ userInfo.telephone }}</el-form-item>
        <el-form-item label="用户性别">{{
          userInfo.gender === "male" ? "男" : "女"
        }}</el-form-item>
        <el-form-item label="用户角色">{{
          userInfo.roles[0].name
        }}</el-form-item>
        <el-form-item label="用户生日">{{
          userInfo.birth | fmtDate
        }}</el-form-item>
        <el-form-item label="注册事件">{{
          userInfo.registerTime | fmtDate
        }}</el-form-item>
        <el-form-item label="邮箱">{{ userInfo.email }}</el-form-item>
        <el-form-item label="用户状态">
          <el-tag v-if="userInfo.status === '正常'" type="success">正常</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </el-form-item>
      </el-form>
    </div>
    <!-- 基本信息模态框 -->
    <el-dialog
      title="修改个人信息"
      :visible.sync="dialogVisible1"
      width="50%"
    >
      <el-form :inline="false" :model="userInfo" class="demo-form-inline" label-width='100px'>
        <el-form-item label="登录用户">
          <el-input v-model="userInfo.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="userInfo.realname"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="userInfo.gender" label="male">男</el-radio>
          <el-radio v-model="userInfo.gender" label="female">女</el-radio>
        </el-form-item>
        <el-form-item label="用户手机">
          <el-input v-model="userInfo.telephone"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱">
          <el-input v-model="userInfo.email"></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker v-model="userInfo.birth" type="date" placeholder="选择出生日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="toUpdateInfo"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 基本信息模态框 结束 -->
    <el-button size="small" type="text" style="position: relative; left: 80%" @click='UpdateInfo'
      >修改个人信息</el-button
    >
  </div>
</template>

<script>
import { getInfo, findUserDetailsById, alterUserface,saveOrUpdate } from "@/api/user.js";
import { uploadFileURL } from "@/utils/config";
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      // 用户id
      userId: null,
      // 用户信息
      userInfo: {},
      // 模态框
      dialogVisible: false,
      dialogVisible1:false,
      uploadFileURL,
      imageUrl: "",
    };
  },
  computed: {
    ...mapGetters(['avatar'])
  },
  methods: {
    // 修改个人信息
    UpdateInfo(){
      this.dialogVisible1 = true
    },
    // 修改用户信息确定按钮
    async toUpdateInfo(){
      await saveOrUpdate(this.userInfo)
      this.dialogVisible1 = false
    },
    // 修改头像
    updateIcon() {
      // await alterUserface({id:this.userId,userFace:this.userInfo.userFace})
      this.dialogVisible = true;
    },
    // 头像 确定按钮
    async toUpdateFace() {
      await alterUserface({
        id: this.userId,
        userface: this.userInfo.userFace,
      });
      // this.avatar = this.userInfo.userFace
      this.dialogVisible = false;
      this.getuserId()
      this.$store.dispatch('user/getInfo');
    },
    // 获取用户id
    async getuserId() {
      let res = await getInfo(this.$store.getters.token);
        this.userInfo = res.data;
      this.userId = res.data.id;
      // this.getInfo();
    },
    // 获取用户信息
    // async getInfo() {
    //   if (this.userId) {
    //     let res = await findUserDetailsById({ id: this.userId });
    //     console.log(res);
    //     this.userInfo = res.data;
    //     // this.userInfo.userFace = this.avatar
    //   }
    // },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.userInfo.userFace = res.data;
      // console.log(res.data.id,'头像');
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  created() {
    this.getuserId();
    // console.log(this.avatar,'111');
  },
  mounted() {},
};
</script>
<style scoped>
.top {
  height: 116px;
  border-bottom: 2px solid #f4f4f4;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top div {
  width: 438px;
}
.img img {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 50%;
  overflow: hidden;
}
.img_btn {
  cursor: pointer;
  font-size: 12px;
  color: #2e8dfd;
  padding-top: 50px;
  text-align: right;
}
.info {
  border-bottom: 2px solid #f4f4f4;
}
</style>